<template>
  <div class="main">
    <section>
        <div 
          class="touming" 
          :style="{backgroundImage:'url(http://d.musicapp.migu.cn/prod/playlist-service/playListimg/af37a730-fbe0-44bd-9c35-91cc20efdc94.jpg)'}">
        </div>
        <div class="img_box">
          <img :src='headerData.image' alt="">
          <span>歌单</span>
          <i class="iconfont">&#xe600; 343.4万</i>
        </div>
        <div class="content_box">
          <p class="p1">{{headerData.playListName}}</p>
          <p class="p2"><i>{{headerData.summary}}</i></p>
        </div>
    </section>

    <div class="content">
      <p>歌曲列表</p>
      <div>
      <MusicList :type='type' :isshow='false' :sort='true' :list='list'></MusicList>
      </div>
    </div>
    <div v-if="loadIsshow" class="dongcidaci">
      <img src="../../assets/img/dongcidaci.gif" alt="">
    </div>
    <footer>

    </footer>
  </div>
</template>

<script lang='ts'>
import { Vue,Component } from "vue-property-decorator";
import MusicList from '../../components/MusicList.vue'
import { get } from '../../utils/http'
@Component({
  components:{
    MusicList
  }
})
export default class SongList extends Vue {
  $route
  $router
  list:Array<object> = []
  type:String = 'songlist'
  loadIsshow:Boolean = false
  headerData:object = {}
   mounted () {
    let imgUrl:String = 'https://m.music.migu.cn/migu/remoting/query_playlist_by_id_tag'
    let playUrl:String = 'https://m.music.migu.cn/migu/remoting/playlistcontents_query_tag'
    const albumId = this.$route.query.albumId
    const id = this.$route.query.id
    if(albumId){
      imgUrl = 'https://m.music.migu.cn/migu/remoting/cms_album_detail_tag'
      playUrl = 'https://m.music.migu.cn/migu/remoting/cms_album_song_list_tag'
      const getData = async ()=>{
        this.loadIsshow = true
        const imgData = await get({
          url:'/api/migu/list',
          params:{
          migu_url:imgUrl,
          albumId: albumId,
          },
        })
        this.headerData  = {  
          image:imgData.data.data.localAlbumPicL,
          playListName:imgData.data.data.albumName,
          summary:imgData.data.data.publishCompany
        }
       const newMusic = await  get({
        url:'/api/migu/list',
        params:{
          migu_url:playUrl,
          playListType: 2,
          albumId,
          contentCount: 10,
        },
      })
      
      newMusic.data.result.results.forEach((value,index):void=>{
        let {copyrightId,contentName:relationTitle,contentType,songName,singerName } = value
        this.list.push({
          songData:{
            contentId:copyrightId,
            contentType,
            relationTitle:songName,
            singerName
            }
          })
        })
        this.loadIsshow = false
        this.type = 'none'
      }
      getData()
    }else{
      const getData = async ()=>{
        this.loadIsshow = true
        const imgData = await get({
          url:'/api/migu/list',
          params:{
            migu_url:imgUrl,
            playListId: id,
          },
        })
        
        this.headerData  = imgData.data.rsp.playList[0]
        const newMusic = await get({
          url:'/api/migu/list',
          params:{
            migu_url:playUrl,
            playListType: 2,
            playListId: id,
            contentCount: 10,
          },
        })
        console.log(newMusic);
        
        newMusic.data.contentList.forEach((value,index):void=>{
          let {contentId,contentName:relationTitle,contentType,songName,singerName } = value
          this.list.push({
            songData:{
              contentId,
              contentType,
              relationTitle,
              singerName:{
                0:singerName
              }
            }
          })
        })
        this.loadIsshow = false
      }
      getData()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .main
    height 100%
    section
      height 2.31rem
      padding .441rem .2205rem
      display flex
      position relative
      justify-content space-between
      overflow hidden
      .touming

        transform: scale(1.5); 
        filter: blur(30px)
        background-repeat: no-repeat;
        background-size:cover;
        background-position: 50%;
        position: absolute;
        overflow hidden
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      .touming::after
        display block
        width 100%
        height 100%
        content: " ";
        background-color: rgba(0,0,0,.25);
      .img_box
        width 1.3892rem
        height 1.3892rem
        position relative
        img 
          width 100%
          height 100%
        span
          position absolute
          left 0
          top .1rem
          background #d93030cc
          padding 0 .1rem
          color #ffffff
          font-size .1323rem
          text-align: center;
          line-height: .2rem;
          border-top-right-radius .1rem
          border-bottom-right-radius .1rem 
        i  
          position: absolute;
          right: .05rem;
          top: 0;
          padding-left: .2rem;
          color: #fff;
          font-size: .1rem;
          text-shadow: 1px 0 0 rgba(0,0,0,.15)
      .content_box

        width 2.1rem
        height 1.3892rem
        .p1
          line-height .30rem
          font-size .19rem
          color #fff
        .p2
          height .3rem
          font-size .1543rem
          margin-top .12rem
          i 
            color #ffffffb3



    .content
      p
        line-height .25358rem
        background #eeeff0
        color #666
        font-size .1rem
  .dongcidaci
    position relative
    left 50%
    top .4rem
    img
      width .2rem
      height .2rem
</style>